<template>
  <div class="card">
    <div class="card-header">
      <div class="text-header">账号注册</div>
    </div>
    <div class="card-body">
      <form action="#">
        <div class="form-group">
          <label for="username">用户名</label>
          <input required="" class="form-control" v-model="signupForm.username" name="username" id="username" type="text">
        </div>
        <div class="form-group">
          <label for="nickname">昵称</label>
          <input required="" class="form-control" v-model="signupForm.nickname" name="username" id="nickname" type="text">
        </div>
        <div class="form-group">
          <label for="email">邮箱</label>
          <input required="" class="form-control" v-model="signupForm.email" name="email" id="email" type="email">
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input required="" class="form-control" v-model="signupForm.password" name="password" id="password" type="password">
        </div>
        <div class="form-group">
          <label for="confirm-password">确认密码</label>
          <input required="" class="form-control" v-model="signupForm.checkPassword" name="confirm-password" id="confirm-password" type="password">
        </div>
        <div style="margin-bottom:15px;color:red">
          <span v-if="passFlag">两次密码输入不一致</span>
        </div>
        <div style="text-align: center;">
          <input type="button" class="back-btn" value="返回登录" @click="$router.push('/login')">
          <input type="button" class="btn" value="注册" @click="HandleSignup">
        </div>
      </form>
    </div>
  </div>

</template>

<script setup>
import {storeToRefs} from "pinia";

document.title = '唯一社区-注册'
import request from "../utils/request.js";
import {ref} from 'vue'
import {useRouter} from "vue-router";
import {Modal} from '@opentiny/vue'
import {useUserStore} from "../store/useUserStore.js";


const router = useRouter()
const userStore = useUserStore()
const signupForm = ref({
  username:'',
  password:'',
  checkPassword:'',
  nickname:'',
  email:''
})
const passFlag = ref(false)
const {tempLoginUsername} = storeToRefs(userStore)


// 注册
const HandleSignup = () => {
  // 校验两次输入的密码是否一致
  if (signupForm.value.password !== signupForm.value.checkPassword){
    passFlag.value = false
    return
  }

  request.post('/api/users/signup',signupForm.value).then(res => {
    passFlag.value = false
    if (res.code === 1){
      Modal.message({message:'注册成功',status:'success'})
      tempLoginUsername.value = signupForm.value.username
      // 跳转首页
      router.push('/login')
    }else {
      if (res.code === 40002){
        passFlag.value = true
        return
      }
      const splits = res.message.split(',')
      Modal.message({message:splits[0],status:'error'})
    }
  })

}

</script>

<style lang="less" scoped>
.card {
  width: 350px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin: 6% auto;
}

.card-header {
  background-color: #333;
  padding: 16px;
  text-align: center;
}

.card-header .text-header {
  margin: 0;
  font-size: 18px;
  color: rgb(255, 255, 255);
}

.card-body {
  padding: 16px;
}

.form-group {
  margin-bottom: 10px;
}

.form-group label {
  display: block;
  font-size: 14px;
  color: #333;
  font-weight: bold;
  margin-bottom: 1px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
  width: 95%;
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.back-btn{
  padding: 12px 24px;
  margin-left: 13px;
  font-size: 16px;
  border-radius: 4px;
  border:1px solid #333;
  background-color: #fff;
  color: #000;
  text-transform: uppercase;
  transition: background-color 0.2s ease-in-out;
  cursor: pointer
}
.back-btn:hover {
  background-color: #ccc;
  color: #fff;
  border:none;
}
.btn {
  padding: 12px 24px;
  margin-left: 13px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  background-color: #333;
  color: #fff;
  text-transform: uppercase;
  transition: background-color 0.2s ease-in-out;
  cursor: pointer
}

.btn:hover {
  background-color: #ccc;
  color: #333;
}
</style>
